<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="author" content="童佳豪">
    <title>作业06</title>
</head>
<style>
    body {
        background-color: black;
    }

    .main {
        width: 940px;
        background-color: black;
        margin: 0 auto;
        box-shadow: 5px 5px 10px grey;
    }

    .block1 {
        background: url("./images/butterflybrilliance.png");
        width: 900px;
        height: 160px;;
        text-align: left;
        color: #08B8F9;
        padding: 20px;
    }

    .block2_menu {
        background-color: #333333;
        padding: 12px 30px;
    }

    .block2_menu ul {
        color: #09B5F5;
        display: inline-block;
        list-style-type: none;
    }

    .block2_menu li {
        display: inline-block;
        margin-left: 20px;
    }

    .block3_main {
        background: url("./images/colbg.png");
        width: 940px;
        height: 700px;
    }

    .block3_main ul {
        list-style-type: none;
        text-decoration: underline;
        color: #085E9B;
    }

    .title {
        margin-left: 20px;
        font-size: 70px;
        letter-spacing: 2px;
        font-family: 'Times New Roman', serif;
        text-shadow: 1px 1px 2px white;
        font-weight: bold;
    }

    .subheading {
        color: white;
        font-family: 'Times New Roman', serif;
        letter-spacing: 2px;
        margin-left: 20px;
        font-weight: bold;
    }


    .left {
        width: 25%;
        position: absolute;
        padding-top: 20px;
    }

    .left p {
        margin-left: 36px;
    }

    .right {
        width: 70%;
        position: relative;
        left: 26%;
        padding: 15px;
    }

    .block5 {
        background-color: #333333;
        height: 140px;
        color: #24A9F9;
    }

    .block5 ul {
        float: left;
        margin-left: 50px;
        list-style-type: none;
    }

    .block5 li {
        text-decoration: underline;
    }

    .menu_option {
        color: #09B5F5;
        margin: 20px;
    }

    .menu_option:hover {
        text-decoration: underline;
    }

    h2:hover {
        color: black;
    }

    h2 {
        color: #085E9B;
        text-decoration: underline;
        font-size: 20px;
        letter-spacing: 2px;
    }


</style>
<body>
<div class="main">
    <div class="block1">
        <div class="title">Butterfly Brilliance</div>
        <br>
        <div class="subheading">Your interesting tag line goes here</div>
    </div>
    <div class="block2_menu">
        <span class="menu_option">Home</span>
        <span class="menu_option">About</span>
        <span class="menu_option">Products</span>
        <span class="menu_option">Services</span>
        <span class="menu_option">Support</span>
        <span class="menu_option">Contact Us</span>
    </div>
    <div class="block3_main">
        <div class="left">
            <p><b>Things To Do </b></p>
            <ul>
                <li>Play Game</li>
                <li>Chat With Friends</li>
                <li>Swap Stories</li>
                <li>Sell Stuff</li>
                <li>Buy Stuff</li>
                <li>Trade Stuff</li>
            </ul>
            <p><b>Sponsors</b></p>
            <p><img src="./images/ad125.jpg"/></p>
            <p><img src="./images/ad125.jpg"/></p>
            <p><b>Connect With Us</b></p>
            <ul>
                <li>Twitter</li>
                <li>Facebox</li>
            </ul>
        </div>
        <div class="right">
            <h2>First Article Title</h2>
            <p><img src="./images/orangebutterfly.png"
                    style="width: 160px;float: left;margin-right: 12px;box-shadow: 8px 8px 16px 0 rgba(0, 0, 0, 0.5);"/>
                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio.
                Praesent libero. Sed cursus ante dapibus diam. Sed nisi. Nulla quis sem at nibh elementum imperdiet.
                Duis sagittis ipsum. Praesent mauris. Fusce nec tellus sed augue semper porta. Mauris massa.
                Vestibulum lacinia arcu eget nulla. Class aptent taciti sociosqu ad litora torquent per conubia nostra,
                per inceptos himenaeos. Curabitur sodales ligula in libero. Sed dignissim lacinia nunc.
                Fusce nec tellus sed augue semper porta. Mauris massa. Vestibulum lacinia arcu eget nulla.
                Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.
            </p>
            <h2>Second Article Title</h2>
            <p><img src="./images/coolbutterfly.png"
                    style="width: 160px;float: right;margin-left: 12px;box-shadow: 8px 8px 16px 0 rgba(0, 0, 0, 0.5);"/>
                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero.
                Sed cursus ante dapibus diam. Sed nisi. Nulla quis sem at nibh elementum imperdiet. Duis sagittis ipsum.
                Praesent mauris. Fusce nec tellus sed augue semper porta. Mauris massa. Vestibulum lacinia arcu eget
                nulla.
                Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.
                Curabitur sodales ligula in libero. Sed dignissim lacinia nunc. Duis sagittis ipsum. Praesent mauris.
                Fusce nec tellus sed augue semper porta. Mauris massa. Vestibulum lacinia arcu eget nulla.
                Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.
            </p>
            <p>Duis sagittis ipsum. Praesent mauris. Fusce nec tellus sed augue semper porta. Mauris massa.
                Vestibulum lacinia arcu eget nulla. Class aptent taciti sociosqu ad litora torquent per conubia nostra,
                per inceptos himenaeos.</p>
        </div>
    </div>

    <div class="block5">
        <ul>
            <li style="color: white; text-decoration:none;margin-left: -8px;font-weight: bold">Friends</li>
            <li>one linkylink</li>
            <li>two linkylinks</li>
            <li>three linkylinks</li>
        </ul>
        <ul>
            <li style="color: white; text-decoration:none;margin-left: -8px;font-weight: bold">Awesome Stuff</li>
            <li>one linkylink</li>
            <li>two linkylinks</li>
            <li>three linkylinks</li>
        </ul>
        <ul>
            <li style="color: white; text-decoration:none;margin-left: -8px;font-weight: bold">Coolness</li>
            <li>one linkylink</li>
            <li>two linkylinks</li>
            <li>three linkylinks</li>
        </ul>
        <ul>
            <li style="color: white; text-decoration:none;margin-left: -1px;font-weight: bold">Blahdyblah</li>
            <li style="text-decoration: none"><span style="color: white; text-decoration:none;">© 2010</span> <span
                    style="text-decoration: underline">yoursite.com</span></li>
            <li style="color: white; text-decoration:none;">Praesent libero Sed cursus</li>
            <li style="color: white; text-decoration:none;">ante dapibus diam. Sed</li>
            <li style="color: white; text-decoration:none;">nisi</li>
        </ul>
    </div>
</div>
</body>
</html>